<template>
<div style="height:100%">
  <div class="prdlist">
  <el-form ref="form" :model="form" label-width="80px">
     <div style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
  <el-form-item label="客户名称">
    <el-input v-model="form.username" readonly ></el-input>
  </el-form-item>

   <el-form-item v-if="form.customertype==1" label="公司名称">
    <el-input v-model="form.companyname" readonly ></el-input>
  </el-form-item>


 
</div>
  <div style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
  <el-form-item label="联系人:">
    <el-input  v-if="form.customertype!=1" v-model="form.manname"  readonly></el-input>
        <el-input  v-if="form.customertype==1" v-model="form.username"  readonly></el-input>

  </el-form-item>
   <el-form-item label="电话">
    <el-input v-model="form.phone"  readonly></el-input>
  </el-form-item>
     <!-- <el-form-item label="职位">
    <el-input v-model="form.work" readonly></el-input>
  </el-form-item>
       <el-form-item label="微信号">
    <el-input v-model="form.weixinhao" readonly></el-input>
  </el-form-item> -->
    </div>

      <!-- <div style="display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
    <el-form-item label="联系人2:">
    <el-input v-model="form.manname2" readonly></el-input>
  </el-form-item>
    
   <el-form-item label="电话">
    <el-input v-model="form.phone2" readonly></el-input>
  </el-form-item>
     <el-form-item label="职位">
    <el-input v-model="form.work2" readonly></el-input>
  </el-form-item>
       <el-form-item label="微信号">
    <el-input v-model="form.weixinhao2" readonly></el-input>
  </el-form-item>
  </div> -->
        <!-- <div style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
    <el-form-item label="联系人3:">
    <el-input v-model="form.manname3" readonly></el-input>
  </el-form-item>
   <el-form-item label="电话">
    <el-input v-model="form.phone3" readonly></el-input>
  </el-form-item>
 <el-form-item label="职位">
    <el-input v-model="form.work3" readonly></el-input>
  </el-form-item>
  <el-form-item label="微信号">
    <el-input v-model="form.weixinhao3" readonly></el-input>
  </el-form-item>
  </div> -->

       <!-- <el-form-item label="联系地址">
    <el-input v-model="form.addr2" readonly ></el-input>
  </el-form-item> -->
          <div v-if="form.customertype!=1" style=" display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;">
    <el-form-item label="所属行业">
    <el-input v-model="form.hangye" readonly></el-input>
  </el-form-item>
   <!-- <el-form-item label="企业主营业务">
    <el-input v-model="form.yewu" readonly></el-input>
  </el-form-item> -->
 <el-form-item label="企业规模">
    <el-input v-model="form.guimo" readonly></el-input>
  </el-form-item>
  <!-- <el-form-item label="企业官网">
    <el-input v-model="form.website" readonly></el-input>
  </el-form-item> -->
    <!-- <el-form-item label="企业公众号">
    <el-input v-model="form.gzh" readonly></el-input>
  </el-form-item> -->
     <el-form-item label="所在地区">
<!-- <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      disabled>
    </el-cascader> -->
      <el-input v-model="form.addr" readonly></el-input>
  </el-form-item>
  </div>


<div style="display: flex;">
  <div class="block">
  <span class="demonstration">已购产品数量</span>
    <h2>{{form.buycount}}</h2>
</div>
  <div class="block">
  <span class="demonstration">理赔记录</span>
  <h2>{{form.recordcount}}</h2>
  
</div>

</div>

</el-form>

<div style="margin: 10px;">
  <label>已购产品记录</label>
  </div>
  <div>
  <el-table
    :data="tableDatapolicy"
    stripe
    height="100%"
    border
    style="width: 98%;margin-left: 1%;">
    <el-table-column
      prop="createTime"
      label="购买时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="productname"
      label="产品名称"
      width="400">
    </el-table-column>
    <el-table-column
     
      label="付款情况">
      <template slot-scope="scope">
      {{converstatus(scope.row.status)}}
      </template>
    </el-table-column>
  </el-table>
  </div>

  <div style="margin: 10px;">
  <label>理赔记录</label>
  </div>
  <div>
  <el-table
    :data="tableDatarecord"
    stripe
    height="100%"
    border
    style="width: 98%;margin-left: 1%;">
    <el-table-column
      prop="createtime"
      label="理赔申请时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="sourceplatform"
      label="理赔产品"
      width="200">
    </el-table-column>
    <el-table-column
     
      label="理赔人数">1
    </el-table-column>
          

    <el-table-column  label="理赔状态"> 
      <template slot-scope="scope">
       
           {{ formatstatus( scope.row.status ) }} 
          
              </template>
    </el-table-column>

      
   
    <el-table-column
      prop="time"
      label="完成时间">
    </el-table-column>
  </el-table>
  </div>
  </div>
</div>
</template>
<script>
import { getmember,getrecords,getpolicys,getpolicysbycustomeridofjjr} from '@/api/policy'
import { switchCase, isSwitchCase } from '@babel/types';

  export default {
    name:'chakan',
    data() {
      return {
           tableDatapolicy:[],
             tableDatarecord:[],
             policypage:1,
             recordpage:1,
             policysize:100,
             recordsize:100,
        form: {
          name: '极乐空间',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          buycount:0,
          recordcount:0
        
        }
      }
    },
    mounted()
    {

     this.getmember(this.$route.query.id);
  
    },
    methods: {
       converstatus(status)
        {
          // {{scope.row.status==1?'保障中':(scope.row.status==0?'待支付':(scope.row.status==2?'逾期':'失效'))}}
             if(status==1)
             return '保障中'
             else if(status==0)
             return '待支付'
             else if(status==2)
             return '待续费'
             else if(status==3)
             return '逾期待续费'
             else if (status=6)
             return '停止保障'

        },
        getmember(id){


       getmember({id:id }).then(res => {
        if (res.code == 200) {
              this.form=res.result;
              if(!this.form.recordcount)
              this.form.recordcount=0;
              if(!this.form.buycount)
              this.form.buycount=0;
                 this.getpolicys();
     this.getrecords();
        } 
        else{
          this.$toast(res.message)
        }
      });
    },

  getpolicys(){

        this.$loadingshow();

       getpolicysbycustomeridofjjr({ page:this.policypage,size:this.policysize,customerid:this.$route.query.id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
              this.tableDatapolicy=res.result.list;
              this.form.buycount=res.result.list.length;
              this.tableDatapolicy.forEach(element => {
                 element.createTime= this.getNowFormatDate(  element.begintime);
              });
              document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
            
         } 
        else{
          this.$toast(res.message)
        }
      });
    },
    formatstatusofpolicy(status)
    {
//获取保单统计情况：待支付0，已支付待核保1，已支付已核保待生效（投保成功）2，已生效保障中（保障中）3，已失效（已过保险期限)4 已撤单5 已核保被拒（退款）6 已赔偿或理赔中7 历史保单8 优嘉确认中9
//  if(status==0)
//      return '待支付'
//      else if(status==1)
//        return '已支付待核保'
//             else if(status==2)
//        return '待生效'
//             else if(status==3)
//        return '保障中'
//             else if(status==4)
//        return '已失效'
//             else if(status==5)
//        return '已撤单'
//             else if(status==6)
//        return '核保被拒'
//            else if(status==7)
//        return '理赔中'
//             else if(status==8)
//        return '历史订单'
//           else if(status==9)
//        return '理赔审核中'
      if(status==0)
      return '待支付'
      else  if(status==1)
      return '保障中'
            else  if(status==2)
      return '已逾期'
            else  if(status==3)
      return '已失效'
            else  if(status==4)
      return '已关闭'
            else  if(status==5)
      return '已删除'
            
    },
      formatstatus(status){
//0（资料不全)刚提交 1审核中 2已赔付 3 已被拒 4 旅行机构审核中 5机构审核通过 6 机构审核拒绝 7超管审核通过
     if(status==0)
     return '资料不全'
     else if(status==1)
       return '审核中'
            else if(status==2)
       return '已赔付'
            else if(status==3)
       return '已被拒'
            else if(status==4)
       return '客户公司审核中'
            else if(status==5)
       return '机构审核通过'
            else if(status==6)
       return '机构审核拒绝'
           else if(status==7)
       return '超管审核通过'

    }
,
  getrecords(){

        this.$loadingshow();
       getrecords({ page:this.recordpage,size:this.recordsize,userid:this.$route.query.id}).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
          
              this.tableDatarecord=res.result;
                            this.form.recordcount=res.result.length;
      
          
                  this.tableDatarecord.forEach(element => {
                 element.createtime= this.getNowFormatDate(  element.createtime);
              });
             document.getElementsByClassName('el-table__body-wrapper')[1].style.height='auto';

         } 
        else{
          this.$toast(res.message)
        }
      });
    },













    getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },





      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style lang="scss" scoped>
.prdlist{
  width:90%;
  height: 100%;
  margin: 2%;
}
.block {
    padding: 30px 0;
    text-align: center;
    border-right: 1px solid #eff2f6;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
}
.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}

</style>
